<template>
    <div>
        <NavSimple></NavSimple>
        <div class="page-wrap">
            <div class="w">
                <div class="user-con">
                    <div class="user-title">用户注册</div>
                    <div class="user-box">
                        <div class="error-item">
                            <i class="fa fa-minus-circle error-icon"></i>
                            <p class="err-msg"></p>
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="username">
                                <i class="fa fa-user"></i>
                            </label>
                            <input class="user-content" id="username" placeholder="请输入用户名" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="password">
                                <i class="fa fa-lock"></i>
                            </label>
                            <input type="password" class="user-content" id="password" placeholder="请输入密码" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="password-confirm">
                                <i class="fa fa-lock"></i>
                            </label>
                            <input type="password" class="user-content" id="password-confirm" placeholder="请再次输入密码" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="phone">
                                <i class="fa fa-phone"></i>
                            </label>
                            <input class="user-content" id="phone" placeholder="请输入手机号" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="email">
                                <i class="fa fa-envelope"></i>
                            </label>
                            <input class="user-content" id="email" placeholder="请输入邮箱" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="question">
                                <i class="fa fa-question"></i>
                            </label>
                            <input class="user-content" id="question" placeholder="请输入密码提示问题" autocomplete="off">
                        </div>
                        <div class="user-item">
                            <label class="user-label" for="answer">
                                <i class="fa fa-key"></i>
                            </label>
                            <input class="user-content" id="answer" placeholder="请输入密码提示问题答案" autocomplete="off">
                        </div>
                        <a class="btn btn-submit" id="submit">立即注册</a>
                        <div class="link-item">
                            <a class="link" href="./user-login.html">已有帐号，去登录&gt;&gt;</a>
                        </div>
                    </div>   
                </div> 
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import {doUserRegister} from '@/api/commonApi'
import NavSimple from "@/views/layout/nav-simple.vue";
import Footer from "@/views/layout/footer.vue";
export default {
    name: "register",
    components: {NavSimple, Footer},
    data: function() {
      return {
      }
    },
    mounted: function(){
        let _this = this;
        $('#submit').click(function(){
            _this.register();
        });
        // 如果按下回车，也进行提交
        $('.user-content').keyup(function(e){
            // keyCode == 13 表示回车键
            if(e.keyCode === 13){
                _this.register();
            }
        });
    },
    methods: {
        register () {
            let _this = this;
            var formData = {
                username        : $.trim($('#username').val()),
                password        : $.trim($('#password').val()),
                passwordConfirm : $.trim($('#password-confirm').val()),
                phone           : $.trim($('#phone').val()),
                email           : $.trim($('#email').val()),
                question        : $.trim($('#question').val()),
                answer          : $.trim($('#answer').val())
            },
            // 表单验证结果
            validateResult = _this.formValidate(formData);
            // 验证成功
            if(validateResult.status){
                formData.password = hexMd5(formData.password, KEY)
                doUserRegister(formData).then((res) => {
                    if(res.data.status === 200){
                        Toast.success("注册成功")       
                        _this.$router.push("./result.html?type=register")
                    } else {
                        Toast.warning(res.data.message);
                    }
                })
            }
            // 验证失败
            else{
                // 错误提示
                Toast.warning(validateResult.message);
                formErrorShow(validateResult.message)
            }
        },
        formValidate: (formData) => {
            var result = {
                status  : false,
                message : ''
            };
            // 验证用户名是否为空
            if(!Tool.validate(formData.username, 'require')){
                 result.message = '用户名不能为空';
                return result;
            }
            // 验证密码是否为空
            if(!Tool.validate(formData.password, 'require')){
                 result.message = '密码不能为空';
                return result;
            }
            // 验证密码长度
            if(formData.password.length < 6){
                 result.message = '密码长度不能少于6位';
                return result;
            }
            // 验证两次输入的密码是否一致
            if(formData.password !== formData.passwordConfirm){
                 result.message = '两次输入的密码不一致';
                return result;
            }
            // 验证手机号
            if(!Tool.validate(formData.phone, 'phone')){
                 result.message = '手机号格式不正确';
                return result;
            }
            // 验证邮箱格式
            if(!Tool.validate(formData.email, 'email')){
                 result.message = '邮箱格式不正确';
                return result;
            }
            // 验证密码提示问题是否为空
            if(!Tool.validate(formData.question, 'require')){
                 result.message = '密码提示问题不能为空';
                return result;
            }
            // 验证密码提示问题答案是否为空
            if(!Tool.validate(formData.answer, 'require')){
                 result.message = '密码提示问题答案不能为空';
                return result;
            }
            // 通过验证，返回正确提示
            result.status   = true;
            result.message  = '验证通过';
            return result;
        }
    }
}
</script>
<style scoped>

/* 最外层容器 */
.page-wrap{
    padding: 40px 0;
    background: #e72955;
}
/* 表单框 */
.user-con{
    position: relative;
    margin: 0 auto;
    width: 400px;
    background: #fff;
}
.user-con .user-title{
    text-align: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #666;
}
.user-con .user-box{
    padding: 20px;
}
/* 错误提示框 */
.user-con .user-box .error-item{
    position: relative;
    padding: 4px 0 4px 40px;
    margin-bottom: 10px;
    border: 1px solid red;
    color: red;
    background: #fde9e9;
    display: none;
}
/* 错误图标 */
.user-con .user-box .error-icon{
    position: absolute;
    left: 14px;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;
}

.user-con .user-item{
    position: relative;
    margin-bottom: 20px;
}
.user-con .user-item .user-label{
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 40px;
    line-height: 36px;
    background: #f3f3f3;
    font-size: 18px;
    color: #d3d3d3;
    text-align: center;
    border-right: 1px solid #bdbdbd;
}
.user-con .user-item .user-content{
    padding: 10px 0 10px 50px;
    width: 308px;
    height: 18px;
    line-height: 18px;
    font-size: 15px;
    border: 1px solid #bdbdbd;
    outline: none;
}
.user-con .btn-submit{
    width: 100%;
    padding: 2px 0;
    text-align: center;
    font-size: 20px;
}
/* 跳转链接 */
.user-con .link-item{
    text-align: right;
    margin-top: 10px;
}
.user-con .link-item .link{
    margin-left: 10px;
    color: #999;
	font-size: 15px;
}

._tilte{
	text-align: center;
	color: #999;
}
</style>
